.weather {
  width: 85%;
  height: 93vh;
  margin-top: 6vh;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  display: grid;
  grid-template-rows: 50%;
  .top {
    display: grid;
    grid-template-columns: 50% 50%;
    .left {
      width: 90%;
      height: 50%;
      padding: 10px;
      .top {
        margin-bottom: 15%;
      }
      .bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 5px;
        height: 20%;
        width: 90%;
        justify-content: center;
        align-items: center;
      }
    }
    .right {
      .container {
        position: relative;
      }
      .box {
        position: relative;
        width: 80%;
        // height: 400px;
        padding-top: 80%; /* 高度等于宽度 */
        margin: auto;
        backdrop-filter: blur(25px);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.5);
        animation: animate 5s ease-in-out infinite;
        animation-delay: -2.5s;
        z-index: 1;
      }
      .clock {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: radial-gradient(transparent, rgba(255, 255, 255, 0.2)),
          url("@/assets/clock.png");
        background-size: cover;
        border-radius: 50%;
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom: none;
        border-right: none;
        box-shadow: -10px -10px 20px rgba(255, 255, 255, 0.1),
          10px 10px 20px rgba(0, 0, 0, 0.1), 0px 40px 50px rgba(0, 0, 0, 0.2);
      }
      .clock::before {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #fff;
        border-radius: 50%;
        z-index: 10000;
      }
      .hour,
      .min,
      .sec {
        position: absolute;
      }
      .hour,
      .hr {
        width: 160px;
        height: 160px;
      }
      .min,
      .mn {
        width: 190px;
        height: 190px;
      }
      .sec,
      .sc {
        width: 230px;
        height: 230px;
      }
      .hr,
      .mn,
      .sc {
        display: flex;
        justify-content: center;
        position: absolute;
        border-radius: 50%;
      }
      .hr::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 80px;
        background-color: #ff105e;
        border-radius: 6px;
        z-index: 11;
      }
      .mn::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 90px;
        background-color: #fff;
        border-radius: 6px;
        z-index: 12;
      }
      .sc::before {
        content: "";
        position: absolute;
        width: 2px;
        height: 150px;
        background-color: rgb(39, 123, 233);
        border-radius: 6px;
        z-index: 13;
      }
      .time {
        background-color: rgba(255, 255, 255, 0.5);
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        margin: 20px auto;
      }
    }
  }
  .bottom {
    display: grid;
    grid-template-rows: 20% 70% 10%;
    .title {
      margin: 40px 20px;
      font-family: "Arial", sans-serif; /* 设置字体 */
      font-size: 24px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
      color: #333; /* 设置字体颜色 */
      text-transform: uppercase; /* 设置文本大写 */
    }
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .change {
      cursor: pointer;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      margin-right: 10px;
    }
  }
}
